<template>
  <div class="main">
     <div class="box">
        <blockquote>waterghost提醒您：请保管好你的账号密码,避免被人盗用恶意使用</blockquote>
      <div style="margin-top:20px">
        <p>手机号码</p>
        <el-input></el-input>
        <p>重置密码</p>
        <el-input show-password type="password"></el-input>
        <p>确认密码</p>
        <el-input show-password type="password"></el-input>
        <p>验证码 <a href="javascript:;" style="font-size:10px;color:red">手机获取验证码</a></p>
        <el-input style="width:50%" type="password"></el-input>
        <p></p>
        <el-button style="margin-top:10px" type="warning" size="small">重置</el-button>
     </div>
     </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped lang="less">
    .main{
        width: 100%;
        height:300px;
        .box{
            width: 600px;
            height: 100%;
            margin: 40px auto;
            padding: 10px;
            // background: yellow;
            p{
                line-height: 30px;
            }
        }
    }
    blockquote{
        border-left: 4px solid #ffcd35;
        padding-left: 10px;
    }
    @media  screen and (max-width: 1300px) {
        .box{
            width: 100% !important;
        }
    }
</style>